<template>
  <div class="company-details" v-loading="infoLoading">
<!--    <template v-if="info.length > 0">-->
      <div class="left-block">
        <div class="title">公司信息</div>
        <div class="company-info">
          <img :src="info.logoUrl" alt="">
          <div class="company-scale">
            <div class="company-name">{{ info.enterpriseName}}</div>
            <div class="scale">{{info.scaleName}} · {{ info.enterpriseTypeText }}</div>
          </div>
        </div>

        <div class="brief-intro"  v-if="enterpriseIntroductionLength>300">
          <span class="small-title">简介：</span>
          <div class="text"  style="overflow-y: scroll;height: 450px" v-html="info.enterpriseIntroduction" v-if="info.enterpriseIntroduction"></div>
          <div class="text" v-else>暂无</div>
        </div>
        <div class="brief-intro" v-else>
          <span class="small-title">简介：</span>
          <div class="text" v-html="info.enterpriseIntroduction" v-if="info.enterpriseIntroduction"></div>
          <div class="text" v-else>暂无</div>
        </div>
      </div>
      <div class="middle-block">
        <div class="middle-top-block">
          <div class="title">工商信息</div>
          <div class="intact-name">公司全称：{{ info.enterpriseName }}</div>
          <div class="property">注册资本：{{ info.regcap }}万元</div>
          <div class="legal-person">法定代表⼈：{{ info.legalPersonName }}</div>
          <div class="create-time">成⽴时间：{{ info.estdate }}</div>
        </div>
        <div class="middle-bottom-block">
          <div class="title">
            公司地址
          </div>

          <div class="location">
            <div class="site" v-if="info.enterpriseAddress">
              {{ info.enterpriseAddress }}
            </div>
            <div v-else>暂无</div>

            <!--            遮盖层-->
            <div v-if="isShow" style="
            width: 100%;height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;"
            >
              <div style="width: 100%;height: 100%;position:absolute;" @click="closeMsg()"></div>
              <div class="map1">
                <div class="title"  style="display: flex;justify-content: space-between">公司地址
                  <div class="site" style="font-size: 20px;color: #000">
                    {{ info.enterpriseAddress }}
                  </div>
                  <div class="img" @click="closeMsg()">
                    <img src="@/assets/Recruitment/close.png" alt="">
                  </div>
                </div>
                <div id="contain"></div>
              </div>
            </div>
          </div>
          <div class="map" @click="openMsg()">
            <img src="@/./assets/Supermarket/site.png" alt="">
            <span>地图</span>
          </div>
        </div>
      </div>
      <div class="right-block">
        <div class="title">招聘职位</div>
        <!--      <template v-if="info1.jobPublishList.length>0">-->
        <div class="post-block" style="overflow-y: scroll;">
          <div class="post-item" v-for="item in info1.jobPublishList" :key="item.id">
            <div class="top">
              <div class="post-title">{{item.jobTitle}}</div>
              <div class="pay">{{item.minSalary}}-{{item.maxSalary}}元</div>
            </div>
            <div class="site">{{item.jobAddress}}</div>
            <div class="condition">{{item.minEducationText}}</div>
          </div>
        </div>
        <!--      </template>-->
        <!--      <div class="text" v-else>暂无</div>-->
      </div>
<!--    </template>-->
<!--    <el-empty v-else style="display: flex;justify-content: center;align-items: center;margin: 0 auto"></el-empty>-->
  </div>
<!--  <el-empty v-else style="display: flex;justify-content: center;align-items: center;"></el-empty>-->
</template>

<script>
import {selectEnterpriseDetailsApi,getEnterpriseByIdApi} from "@/api/fair";

export default {
  name: "company-details",
  data(){
    return{
      infoLoading:false,
      isShow:false,
      info1:{},
      jobPublishList:[],
      info:{
        id:1,
        enterpriseName: '',
        logoUrl:'',
        scaleName:'',
        enterpriseIntroduction: '',
        regcap: 100,
        legalPersonName: '',
        estdate: '',
        enterpriseTypeText:'',
        dom:'',
        jobPublishList:[
            {
              id: 1,
              jobTitle:'',
              minSalary:'',
              maxSalary:'',
              jobAddress:'',
              jobDescription:'',
              minEducationText:'',
              enterpriseLatitude:'',
              enterpriseLongitude:''
            }
        ]
      },
    }
  },
  methods:{
    openMsg(){
      this.isShow = true
      this.$nextTick(()=>{
        this.initMap()
      })
    },
    closeMsg(){
      this.isShow = false
    },
    selectEnterpriseDetails() {
      this.infoLoading = true
      // selectEnterpriseDetailsApi({sId:this.sId,cId:this.cId}).then((res) => {
      selectEnterpriseDetailsApi({sId:this.sId,cId:this.cId}).then((res) => {
        this.info = res;
      }).finally(()=>{
        this.infoLoading = false
      })
    },
    getEnterpriseById(){
      this.infoLoading = true
      getEnterpriseByIdApi({id:this.id}).then((res) => {
        this.info1 = res;
      }).finally(()=>{
        this.infoLoading = false
      })
    },
    initMap() {
      //定义地图中心点坐标
      var center = new window.TMap.LatLng( this.info.enterpriseLatitude,this.info.enterpriseLongitude,)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('contain'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
      });
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(this.info.enterpriseLatitude,this.info.enterpriseLongitude,),
          "properties": {
            "title": this.info.jobAddress,
            "address": this.info.jobAddress,
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.info.enterpriseLatitude,this.info.enterpriseLongitude,),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;">
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })
    }
  },
  computed:{
    enterpriseIntroductionLength:function (){
      return this.info.enterpriseIntroduction.length
    }
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.selectEnterpriseDetails()
    this.getEnterpriseById()
    // this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.company-details{
  box-sizing: border-box;
  width: 800px;
  margin: 30px auto;
  border-radius: 20px;
  .left-block{
    width: 800px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 20px;
    border-radius: 15px;
    margin-right: 15px;
    background-color: #fff;
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .company-info{
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 20px;
      font-size: 20px;
      img{
        width: 75px;
        height: 75px;
      }
      .company-scale{
        box-sizing: border-box;
        line-height: 30px;
        margin-left: 20px;
        .scale{
          margin-top: 10px;
        }
        .company-name{
        }
      }
    }
    .brief-intro{
      line-height: 45px;
      margin-top: 20px;
      font-size: 18px;
      .small-title{
        color: #5E99F4;
      }
      .text{
        font-size: 20px;
        line-height: 40px;
        text-indent: 2em;
      }
    }
  }
  .middle-block{
    width: 800px;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    margin: 30px 0;
    .middle-top-block{
      width: 50%;
      height: 280px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      margin-right: 30px;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .intact-name{
        margin-top: 20px;
        font-size: 20px;
      }
      .property{
        margin-top: 20px;
        font-size: 20px;
      }
      .legal-person{
        margin-top: 20px;
        font-size: 20px;
      }
      .create-time{
        margin-top: 20px;
        font-size: 20px;
      }
    }
    .middle-bottom-block{
      width: 50%;
      height: 280px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      //margin-top: 20px;
      background-color: #fff;
      .map1{
        position: relative;
        width: 100%;
        height: 35%;
        background-color: #fff;
        border-radius: 15px;
        padding: 10px;
        .img{
        width: 3%;
        height: 75%;
        margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          text-align: left;
          margin: 10px 10px 30px 10px;
          color: #498CF3;
          font-size: 26px;
          font-weight: 900;
        }
      }
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .map{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: 130px;
        height: 40px;
        line-height: 37px;
        color: #498CF3;
        border: 1px solid #498CF3;
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px #e5e5e5;
        span{
          margin-bottom: 10px;
        }
        img{
          margin: 8px 0px 0 0;
          width: 25px;
          height: 25px;
        }
      }
      .location{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 25px;
        text-align: center;
        font-size: 18px;
        height: 120px;
        .site{
          text-align: left;
          line-height: 37px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }

      }
    }
  }
  .right-block{
    width: 800px;
    height: 490px;
    box-sizing: border-box;
    padding: 20px 20px;
    border-radius: 15px;
    margin: 30px auto;
    background-color: #fff;

    .text{
      text-align: center;
      font-size: 25px;
      line-height: 300px;
    }
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .post-block{
      display: flex;
      flex-wrap: wrap;
      height: 400px;
      overflow: hidden;
    }
    .post-item{
      border: 1px solid #498CF3;
      border-radius: 15px;
      width: 777px;
      padding: 10px 20px;
      height: 160px;
      margin: 20px 15px;
      .top{
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        .post-title{
          width: 400px;
          font-size: 26px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .pay{
          font-size: 26px;
          color: #5493F3;
        }
      }
      .site{
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 20px;
        white-space: nowrap;
      }
      .condition{
        font-size: 20px;
        margin-top: 20px;
      }
    }

  }
}
</style>
